<template>
  <div class="container">
    <el-card class="box-card">
      <!-- 新增试题按钮 -->
      <el-row>
        <el-button type="success" class="right" icon="el-icon-edit" @click="Redirect" >新增试题</el-button>
      </el-row>

      <!-- 选择表单 -->
      <el-form v-model="Query">
        <el-row>
          <el-col :span="6">
            <el-form-item label="学科" label-width="80px" prop="subject">
              <el-select placeholder="请选择" v-model="Query.subject" @change="SelectionSubjects">
                <el-option :label="item.label" :value="item.value" v-for="(item, index) in DropdownList" :key="index"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录" label-width="80px" prop="creatorID">
              <el-select placeholder="请选择" v-model="Query.creatorID"> <el-option :label="item.label" :value="item.value" v-for="(item, index) in DirectoryList" :key="index"></el-option></el-select
            ></el-form-item>
          </el-col>
          <el-col :span="6"
            ><el-form-item label="标签" label-width="80px" prop="tags">
              <el-select placeholder="请选择" v-model="Query.tags">
                <el-option :label="item.label" :value="item.value" v-for="(item, index) in tagsList" :key="index"></el-option> </el-select></el-form-item
          ></el-col>
          <el-col :span="6">
            <el-form-item label="关键字" label-width="80px" prop="keyword"> <el-input v-model="Query.keyword"></el-input> </el-form-item
          ></el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="试题类型" label-width="80px" prop="questionType">
              <el-select placeholder="请选择" v-model="Query.questionType">
                <el-option :label="item.label" :value="item.value" v-for="(item, index) in questionType" :key="index"></el-option> </el-select></el-form-item
          ></el-col>
          <el-col :span="6">
            <el-form-item label="难度" label-width="80px" prop="difficulty">
              <el-select placeholder="请选择" v-model="Query.difficulty">
                <el-option :label="item.label" :value="item.value" v-for="(item, index) in difficulty" :key="index"></el-option> </el-select></el-form-item
          ></el-col>
          <el-col :span="6">
            <el-form-item label="方向" label-width="80px" prop="direction">
              <el-select placeholder="请选择" v-model="Query.direction"> <el-option :label="item" :value="index" v-for="(item, index) in direction" :key="index"></el-option> </el-select></el-form-item
          ></el-col>
          <el-col :span="6">
            <el-form-item label="录入人" label-width="80px" @change="SelectionCreator" prop="creator">
              <el-select placeholder="请选择" v-model="Query.creator">
                <el-option :label="item.username" :value="item.id" v-for="(item, index) in UsersList" :key="index"></el-option>
              </el-select> </el-form-item
          ></el-col>
        </el-row>
        <el-row>
          <el-col :span="6"
            ><el-form-item label="题目备注" prop="remarks" label-width="80px"> <el-input v-model="Query.remarks"></el-input></el-form-item
          ></el-col>
          <el-col :span="6"
            ><el-form-item label="企业简称" prop="shortName" label-width="80px"> <el-input v-model="Query.shortName"></el-input></el-form-item
          ></el-col>
          <el-col :span="6">
            <el-form-item label="城市" prop="provinces" label-width="80px">
              <el-col :span="12">
                <el-select placeholder="请选择" v-model="Query.province" @change="SelectionProvinces">
                  <el-option v-for="(item, index) in provinces" :key="index" :label="item" :value="item"></el-option>
                </el-select>
              </el-col>
              <el-col :span="12">
                <el-select placeholder="请选择" v-model="Query.city">
                  <el-option :label="item" :value="item" v-for="(item, index) in citysList" :key="index"></el-option>
                </el-select>
              </el-col> </el-form-item
          ></el-col>
          <el-col :span="6">
            <div class="btn-primary">
              <el-button @click="clearProp">清除</el-button>
              <el-button type="primary" @click="getList">搜索</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>

      <!-- 消息提示 -->
      <el-alert :title="`数据一共${total}条`" type="info" show-icon :closable="false"></el-alert>

      <!-- 表格 -->
      <el-table style="width: 100%" :data="basicsList" border stripe>
        <el-table-column label="试题编号" prop="number"></el-table-column>
        <el-table-column label="学科" prop="subject"></el-table-column>
        <el-table-column label="目录" prop="catalog"></el-table-column>
        <el-table-column label="题型">
          <template slot-scope="scope">
            <el-tag type="info" v-if="scope.row.questionType === '1'">单选</el-tag>
            <el-tag type="info" v-else-if="scope.row.questionType === '2'">多选</el-tag>
            <el-tag type="info" v-else>简答</el-tag>
          </template>
        </el-table-column>
        <!-- 问题2 v-html -->
        <el-table-column label="题干">
          <template slot-scope="scope">
            <div v-html="scope.row.question"></div>
          </template>
        </el-table-column>
        <el-table-column label="录入时间">
          <template slot-scope="scope">{{ scope.row.addDate | parseTimeByString }} </template>
        </el-table-column>
        <el-table-column label="难度" prop="difficulty">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.difficulty === '1'">简单</el-tag>
            <el-tag type="warning" v-else-if="scope.row.difficulty === '2'">一般</el-tag>
            <el-tag type="danger" v-else>困难</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="录入人" prop="creator"></el-table-column>
        <el-table-column label="操作" width="180px">
          <template slot-scope="scope">
            <!-- 查看按钮 -->
            <el-button icon="el-icon-view" type="primary" circle plain size="mini" @click="showQueryDialog(scope.row.id)"></el-button>
            <!-- 修改按钮 -->
            <el-button type="success" icon="el-icon-edit" size="mini" plain circle @click="showEditDialog(scope.row.id)"></el-button>
            <!-- 删除按钮 -->
            <el-button type="danger" plain icon="el-icon-delete" size="mini" circle @click="RemoveQuestionById(scope.row.id)"></el-button>
            <!-- 成功按钮 -->
            <el-button type="warning" plain icon="el-icon-check" circle size="mini" @click="GoodQuestionById(scope.row.id, scope.row.choiceState)"></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="Query.page"
          :page-sizes="[5, 8, 10, 20]"
          :page-size="Query.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
    <!-- 查看按钮对话框 -->
    <el-dialog title="题目预览" :visible.sync="queryDialogVisible" width="50%">
      <question-preview :queryForm="queryForm" v-if="queryDialogVisible" :options="options" @Closebtn="queryDialogVisible = $event"></question-preview>
    </el-dialog>
  </div>
</template>

<script>
import { list, detail, remove, choiceAdd } from '@/api/hmmm/questions'
import { simple } from '@/api/hmmm/subjects'
import { simple as simpledirectory } from '@/api/hmmm/directorys' // 问题1
import { simple as simpletags } from '@/api/hmmm/tags'
import { difficulty, questionType, direction } from '@/api/hmmm/constants'
import { simple as simpleUsers } from '@/api/base/users'
import { provinces, citys } from '@/api/hmmm/citys'
import QuestionPreview from '../components/questions-preview'

export default {
  name: 'Questions',
  components: {
    QuestionPreview
  },
  props: {},
  data () {
    return {
      basicsList: [],

      // 获取列表参数对象
      Query: {
        query: '',
        page: 1, // 当前页数
        pagesize: 5, // 页尺寸
        subjectID: null, // 学科
        difficulty: null, // 难度
        questionType: null, // 试题类型
        tags: null, // 标签
        province: null, // 省市
        city: null, // 地区
        keyword: null, // 关键字
        remarks: null, // 题目备注
        shortName: null, // 企业简称
        direction: null, // 方向
        creatorID: null, // 目录
        creator: null, // 录入人
        question: null
      },

      total: 0,
      currentPage: 1,
      DropdownList: [], // 学科列表
      DirectoryList: [], // 目录列表
      tagsList: [], // 标签列表
      difficulty: difficulty, // 难度
      questionType: questionType, // 题型
      direction: direction, // 方向
      UsersList: [],
      provinces: provinces(), // 省份
      citysList: [], // 地区
      queryDialogVisible: false, // 控制对话框的显示与隐藏
      queryForm: {}, // 查看题库对象
      options: [] // 所有题目的对应的选项，组装成一个对象数组
    }
  },
  computed: {},
  watch: {},
  created () {
    this.getList()
    this.DropdownSubject()
    this.SelectionCreator()
  },
  mounted () {},
  methods: {
    async getList () {
      try {
        const { data } = await list(this.Query)
        // console.log(data)
        this.basicsList = data.items
        this.page = data.page
        this.pagesize = data.pagesize
        this.total = data.counts
      } catch (err) {
        console.log('请求失败', err)
      }
    },
    // 下拉菜单
    async DropdownSubject () {
      try {
        const { data } = await simple()
        this.DropdownList = data
        // console.log(data)
      } catch (err) {
        console.log('请求失败', err)
      }
    },
    // 获取选中id的二级目录
    async SelectionSubjects (id) {
      try {
        const { data } = await simpledirectory({
          subjectID: id
        })
        this.DirectoryList = data
        this.SelectionTags(id)
      } catch (err) {
        console.log('请求失败', err)
      }
    },
    // 标签
    async SelectionTags (id) {
      try {
        const { data } = await simpletags({
          subjectID: id
        })
        this.tagsList = data
        // console.log(data)
      } catch (err) {
        console.log('请求失败', err)
      }
    },
    // 录入人
    async SelectionCreator () {
      try {
        const { data } = await simpleUsers({})
        // console.log(data)
        this.UsersList = data
      } catch (err) {
        console.log('请求失败', err)
      }
    },
    // 城市
    SelectionProvinces () {
      this.citysList = citys(this.Query.province)
    },
    // 分页 监听pagesize改变的事件
    handleSizeChange (newSize) {
      this.Query.pagesize = newSize
      this.getList()
    },
    // 分页 页码值改变
    handleCurrentChange (newPage) {
      this.Query.page = newPage
      this.getList()
    },
    // 清除按钮
    clearProp () {
      this.Query.subject = ''
      this.Query.creatorID = ''
      this.Query.tags = ''
      this.Query.keyword = ''
      this.Query.questionType = ''
      this.Query.difficulty = ''
      this.Query.direction = ''
      this.Query.creator = ''
      this.Query.remarks = ''
      this.Query.shortName = ''
      this.Query.province = ''
      this.Query.city = ''
    },
    // 查看按钮
    async showQueryDialog (id) {
      try {
        const { data } = await detail({ id })
        console.log(data)
        this.queryForm = data
        this.options = data.options
        this.queryDialogVisible = true
      } catch (err) {
        console.log('请求失败', err)
      }
    },
    //  修改按钮
    showEditDialog () {},
    // 删除按钮
    RemoveQuestionById (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const { data } = await remove({ id })
          console.log(data)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          // 删除后刷新数据
          this.getList()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 精选按钮
    GoodQuestionById (id, choiceState) {
      this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const { data } = await choiceAdd({ id: id, choiceState: 1 })
          console.log(data)
          this.$message({
            type: 'success',
            message: '加入精选成功！'
          })
          // 加入精选后刷新数据
          this.getList()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消加入精选'
          })
        })
    },
    Redirect () {
      this.$router.push('/questions/new')
    }
  }
}
</script>

<style scoped lang='scss'>
.el-card {
  height: auto;
  .right {
    float: right;
    margin-bottom: 10px;
  }
}
.btn-primary {
  float: right;
}
.el-table {
  margin-top: 10px;
  font-size: 12px;
}
.block {
  margin-top: 10px;
}
.one {
  margin-bottom: 10px;
}
.el-radio-group {
  display: flex;
  flex-direction: column;
  align-items: start;
  .el-radio {
    margin-top: 10px;
  }
}
.closebtn {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
